<template>
	<view class="container">
		<view class="header">
			<text class="title">观看历史</text>
			<text class="subtitle">您的学习足迹</text>
		</view>

		<!-- 操作栏 -->
		<view class="actions">
			<uni-button size="mini" @tap="clearAllHistory">清空历史</uni-button>
			<uni-button size="mini" type="primary" @tap="refreshHistory">刷新</uni-button>
		</view>

		<!-- 历史记录列表 -->
		<scroll-view scroll-y class="list">
			<view v-for="(item, index) in historyList" :key="item.id || index" class="history-card">
				<view class="cover" :style="{ backgroundImage: 'url(' + (item.cover || defaultCover) + ')' }">
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: item.progress + '%' }"></view>
					</view>
				</view>
				<view class="info">
					<text class="title">{{ item.title }}</text>
					<text class="meta">老师：{{ item.teacherName }} · 观看时长：{{ formatDuration(item.watchDuration) }}</text>
					<text class="time">观看时间：{{ item.watchedAt }}</text>
				</view>
				<view class="actions">
					<uni-button size="mini" @tap="continueWatch(item)">继续观看</uni-button>
					<uni-button size="mini" type="warn" @tap="deleteHistory(item.id)">删除</uni-button>
				</view>
			</view>
			<view v-if="historyList.length === 0" class="empty">暂无观看历史</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';

	const historyList = ref<any[]>([]);
	const defaultCover = 'https://ai-public.mastergo.com/ai/img_res/5e74b8b2f90b2b7a28f8c6f1d6f1c8a0.jpg';

	// 前端人员：获取观看历史
	// BACKEND REQUIRED
	// GET /api/history?page=页码&pageSize=条数
	// Response 200
	// {
	//   "success": true,
	//   "data": [
	//     {
	//       "id": "HIST_001",
	//       "courseId": "COURSE_001",
	//       "title": "高等数学直播第3讲",
	//       "teacherName": "张老师",
	//       "cover": "https://.../cover.jpg",
	//       "progress": 65, // 观看进度百分比
	//       "watchDuration": 1800, // 观看时长（秒）
	//       "watchedAt": "2025-08-26 20:12:00"
	//     }
	//   ],
	//   "page": 1,
	//   "pageSize": 20,
	//   "total": 25
	// }
	const fetchHistory = () => {
		uni.request({
			url: '/api/history',
			method: 'GET',
			data: { page: 1, pageSize: 20 },
			success: (res: any) => {
				if (res.data && res.data.success) {
					historyList.value = res.data.data || [];
				} else {
					historyList.value = [];
				}
			},
			fail: () => { historyList.value = []; }
		});
	};

	// 前端人员：删除单条历史记录
	// BACKEND REQUIRED
	// DELETE /api/history/:id
	// Response 200: { success: true }
	const deleteHistory = (id: string) => {
		uni.showModal({
			title: '删除记录',
			content: '确定要删除这条观看记录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.request({
						url: `/api/history/${id}`,
						method: 'DELETE',
						success: (res: any) => {
							if (res.data?.success) {
								historyList.value = historyList.value.filter(item => item.id !== id);
								uni.showToast({ title: '删除成功', icon: 'success' });
							}
						}
					});
				}
			}
		});
	};

	// 前端人员：清空所有历史记录
	// BACKEND REQUIRED
	// DELETE /api/history
	// Response 200: { success: true }
	const clearAllHistory = () => {
		uni.showModal({
			title: '清空历史',
			content: '确定要清空所有观看历史吗？此操作不可恢复。',
			success: (res) => {
				if (res.confirm) {
					uni.request({
						url: '/api/history',
						method: 'DELETE',
						success: (res: any) => {
							if (res.data?.success) {
								historyList.value = [];
								uni.showToast({ title: '已清空历史', icon: 'success' });
							}
						}
					});
				}
			}
		});
	};

	const continueWatch = (item: any) => {
		// 跳转到播放页面，传递进度信息
		uni.navigateTo({ 
			url: `/pages/player/player?courseId=${item.courseId}&progress=${item.progress}` 
		});
	};

	const refreshHistory = () => {
		fetchHistory();
		uni.showToast({ title: '刷新成功', icon: 'success' });
	};

	const formatDuration = (seconds: number) => {
		const hours = Math.floor(seconds / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);
		if (hours > 0) {
			return `${hours}小时${minutes}分钟`;
		}
		return `${minutes}分钟`;
	};

	onMounted(fetchHistory);
</script>

<style>
	.container { padding: 30rpx; }
	.header { margin-bottom: 20rpx; }
	.title { font-size: 20px; font-weight: 700; color: #333; }
	.subtitle { font-size: 14px; color: #666; display: block; margin-top: 8rpx; }
	.actions { display: flex; gap: 12rpx; margin: 16rpx 0 20rpx; }
	.list { max-height: calc(100vh - 260rpx); }
	.history-card { display: flex; gap: 14rpx; background: #fff; border-radius: 14rpx; padding: 16rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.05); }
	.cover { width: 180rpx; height: 120rpx; border-radius: 10rpx; background-size: cover; background-position: center; position: relative; }
	.progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4rpx; background: rgba(0,0,0,.3); border-radius: 0 0 10rpx 10rpx; }
	.progress-fill { height: 100%; background: #1890ff; border-radius: 0 0 10rpx 10rpx; }
	.info { flex: 1; display: flex; flex-direction: column; gap: 8rpx; }
	.info .title { font-size: 16px; font-weight: 600; color: #222; }
	.info .meta { font-size: 12px; color: #888; }
	.info .time { font-size: 12px; color: #999; }
	.actions { display: flex; gap: 8rpx; align-items: center; }
	.empty { text-align: center; color: #999; margin-top: 60rpx; }
</style>






